<template>
  <div class="chack-box-area">
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
      style="margin: 3px 5px 0 0;"
    >
      全选
    </el-checkbox>
    <el-checkbox-group
      v-model="checkedlayers"
      class="group"
      :style="{ width: width }"
      @change="handleCheckedChange"
    >
      <el-checkbox v-for="item in layerOptions" :key="item" :label="item">
        {{ item }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
// const layerArr = ["模型名称", "模型朝向"];
export default {
  props: {
    layerArr: {
      type: Array,
      default: () => [],
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      layerOptions: this.layerArr, // 图层选项
      isIndeterminate: false,
      checkAll: true,
      checkedlayers: [...this.layerArr],
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedlayers = val ? this.layerArr : [];
      this.isIndeterminate = false;
      this.giveCheckedlayers();
    },
    handleCheckedChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.layerOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.layerOptions.length;
      this.giveCheckedlayers();
    },
    giveCheckedlayers() {
      this.$emit("giveCheckedlayers", this.checkedlayers);
    },
  },
};
</script>

<style lang="scss" scoped>
.chack-box-area {
  width: 100%;
  height: 50px;
  display: flex;
  .group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; // 修改为两端对齐
    align-items: center;
    width: 100%;

    // 每个复选框占50%宽度
    .el-checkbox {
      flex: 0 0 calc(50% - 5px); // 使用calc计算宽度，留出间距
      margin-right: 0;
      box-sizing: border-box;
    }
  }
}
</style>
